<template>
  <a-modal
    v-model="modalVisible"
    :title="title"
    :width="1200"
    :destroyOnClose="true"
    :maskClosable="false"
    :footer="null"
    centered
  >
    <a-spin :spinning="spinningLoading">
      <a-icon
        slot="indicator"
        type="loading"
        style="font-size: 24px"
        spin
      />

      <FCPage direction="row">
        <FCTab
          :tabList="tabList"
          activeKey="1"
        >
          <FCPage
            :slot="1"
            direction="column"
          >
            <FCLayout height="180px">
              <FCForm
                ref="formRef"
                v-bind="formConfig"
                :dataset="formDataSet"
              />
            </FCLayout>
            <FCLayout :flex="1">
              <FCTable
                :scroll="tableDataSource.length > 0 ? { x: '100%'} : { x: '100%'} "
                :fields="tableFields"
                :dataset="tableDataSet"
                shouldPagination
                :rowKey="rowKey"
              />
            </FCLayout>
          </FCPage>
        </FCTab>
      </FCPage>
      <div style="text-align: center">
        <FCButton
          style="margin-top: 10px;"
          @click="handleClose"
        >关闭</FCButton>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import FCDataset from '@/vendors/fc-dataset/FCDataset'
import FCTab from '@/vendors/fc-ui/src/controls/FCTab.vue'
import FCForm from '@/vendors/fc-ui/src/form/FCForm.vue'
import FCTable from '@/vendors/fc-ui/src/table/FCTable.vue'
import FCButton from '@/vendors/fc-ui/src/controls/FCButton.vue'

import {
  drp_paymentstatus,
  drp_currency,
  drp_opttype,
} from '@/pages/paymentApplicationFormPay/data'

import { getPaymentApplicationFormInfo } from '@/apis/paymentApplicationFormApi'

export default {
  name: 'paymentApplicationFormInfo',
  components: {
    FCTab,
    FCForm,
    FCTable,
    FCButton,
  },
  props: {
    detailData: Object,
  },
  data() {
    const formDataSet = new FCDataset({
      fields: [
        { name: 'summaryno', type: 'string' },
        { name: 'customername', type: 'string' },
        { name: 'currencycode', type: 'string' },
        { name: 'amount', type: 'string' },
        { name: 'accountno', type: 'string' },
        { name: 'tabperiod', type: 'string' },
        { name: 'exchangecurrencycode', type: 'string' },
        { name: 'exchangeamount', type: 'string' },
        { name: 'paymentstatus', type: 'string' },
        { name: 'memo', type: 'string' },
        { name: 'backinfo', type: 'string' },
        { name: 'collpayflag', type: 'string' },
        { name: 'fastflag', type: 'string' },
      ],
      datas: [],
    })
    const tableDataSet = new FCDataset({
      fields: [
        { name: 'ribillno', type: String },
        { name: 'basecurrency', type: String },
        { name: 'sumorireceiveamount', type: String },
        { name: 'sumoripayamount', type: String },
        { name: 'orireceiveamount', type: String },
        { name: 'oripayamount', type: String },
        { name: 'taxesamount', type: String },
        { name: 'vatsurcharge', type: String },
        { name: 'taxescnyamount', type: String },
        { name: 'vatsurchargermb', type: String },
        { name: 'reinsurernamecn', type: String },
        { name: 'operratorname', type: String },
        { name: 'posteddate', type: String },
        { name: 'memo', type: String },
        { name: 'opttype', type: String },
        { name: 'currency', type: String },
        { name: 'sumreceiveamount', type: String },
        { name: 'sumpayamount', type: String },
        { name: 'receiveamount', type: String },
        { name: 'payamount', type: String },
      ],
      datas: [],
    })
    return {
      rowKey: 'ribillno',
      tableDataSource: [],
      tableFields: [
        {
          title: '账单编号',
          name: 'ribillno',
          width: 160,
          ellipsis: true,
        },
        {
          title: '币种（原币）',
          name: 'basecurrency',
          width: 120,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_currency.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '应收总金额（原币）',
          name: 'sumorireceiveamount',
          width: 160,
          ellipsis: true,
        },
        {
          title: '应付总金额(原币)',
          name: 'sumoripayamount',
          width: 180,
          ellipsis: true,
        },
        {
          title: '本次实收金额（原币）',
          name: 'orireceiveamount',
          width: 180,
          ellipsis: true,
        },
        {
          title: '本次实付金额(原币)',
          name: 'oripayamount',
          width: 180,
          ellipsis: true,
        },
        {
          title: '增值税',
          name: 'taxesamount',
          width: 120,
          ellipsis: true,
        },
        {
          title: '增值税附加',
          name: 'vatsurcharge',
          width: 120,
          ellipsis: true,
        },
        {
          title: '增值税(RMB)',
          name: 'taxescnyamount',
          width: 120,
          ellipsis: true,
        },
        {
          title: '增值税附加(RMB)',
          name: 'vatsurchargermb',
          width: 160,
          ellipsis: true,
        },
        {
          title: '再保人',
          name: 'reinsurernamecn',
          width: 120,
          ellipsis: true,
        },
        {
          title: '制单人',
          name: 'operratorname',
          width: 120,
          ellipsis: true,
        },
        {
          title: '结算日期',
          name: 'posteddate',
          width: 120,
          ellipsis: true,
        },
        {
          title: '备注',
          name: 'memo',
          width: 120,
          ellipsis: true,
        },
        {
          title: '分保方向',
          name: 'opttype',
          width: 120,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_opttype.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '币种（折币）',
          name: 'currency',
          width: 120,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_currency.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '应收总金额（折币）',
          name: 'sumreceiveamount',
          width: 160,
          ellipsis: true,
        },
        {
          title: '应付总金额（折币）',
          name: 'sumpayamount',
          width: 160,
          ellipsis: true,
        },
        {
          title: '本次实收金额（折币）',
          name: 'receiveamount',
          width: 180,
          ellipsis: true,
        },
        {
          title: '本次实付金额（折币）',
          name: 'payamount',
          width: 180,
          ellipsis: true,
        },
      ],
      tableDataSet,
      spinningLoading: false,
      title: '付款申请单详情',
      modalVisible: false,
      tabList: [{ key: '1', title: '付款申请单对应的账单列表' }],
      formConfig: {
        cols: 4, //每行布局几列
        labelCol: 8,
        wrapperCol: 16,
        labelAlign: 'right', //对齐方式
        fields: [
          {
            name: 'summaryno',
            title: '申请单编号',
            controlType: 'input',
            controlProps: {
              disabled: true,
            },
          },
          {
            name: 'customername',
            title: '再保人',
            controlType: 'input',
            controlProps: {
              disabled: true,
            },
          },
          {
            name: 'currencycode',
            title: '折币币种',
            controlType: 'select',
            controlProps: {
              disabled: true,
              optionsApi: () => {
                return [...drp_currency]
              },
            },
          },
          {
            name: 'amount',
            title: '折币金额',
            controlType: 'input',
            controlProps: {
              disabled: true,
            },
          },
          {
            name: 'accountno',
            title: '银行账号',
            controlType: 'input',
            controlProps: {
              disabled: true,
            },
          },
          {
            name: 'tabperiod',
            title: '账期',
            controlType: 'datePicker',
            controlProps: {
              disabled: true,
              format: 'YYYY-MM-DD',
              style: { width: '100%' },
            },
          },
          {
            name: 'exchangecurrencycode',
            title: '应付币种',
            controlType: 'select',
            controlProps: {
              disabled: true,
              optionsApi: () => {
                return [...drp_currency]
              },
            },
          },
          {
            name: 'exchangeamount',
            title: '应付金额',
            controlType: 'input',
            controlProps: {
              disabled: true,
            },
          },
          {
            name: 'paymentstatus',
            title: '申请单状态',
            controlType: 'select',
            controlProps: {
              disabled: true,
              optionsApi: () => {
                return [...drp_paymentstatus]
              },
            },
          },
          {
            name: 'memo',
            title: '备注',
            controlType: 'input',
            controlProps: {
              disabled: true,
            },
          },
          {
            name: 'backinfo',
            title: '回退意见',
            controlType: 'input',
            controlProps: {
              disabled: true,
            },
          },
          {
            name: 'collpayflag',
            title: '汇总支付标志',
            labelCol: 10,
            wrapperCol: 14,
            controlType: 'checkbox',
            controlProps: {
              disabled: true,
              onValue: '1',
              offValue: '0',
            },
          },
          {
            name: 'fastflag',
            title: '加急件',
            controlType: 'checkbox',
            controlProps: {
              disabled: true,
              onValue: '1',
              offValue: '0',
            },
          },
        ],
      },
      formDataSet: formDataSet,
    }
  },
  methods: {
    handleOpen() {
      this.modalVisible = true
      this.$nextTick(() => {
        this.getPaymentApplicationFormInfo()
      })
    },
    handleClose() {
      this.$emit('close')
      this.modalVisible = false
    },
    async getPaymentApplicationFormInfo() {
      this.tableDataSet.clear()
      this.formDataSet.clear()
      this.spinningLoading = true
      const resData = await getPaymentApplicationFormInfo()
      this.spinningLoading = false
      this.tableDataSource = resData?.data?.data || []
      this.tableDataSource.forEach((item) => {
        this.tableDataSet.addRecord(item)
      })
      const obj = JSON.parse(JSON.stringify(this.detailData))
      console.log('> 详情数据：', obj, 'dataset:', this.formDataSet)

      this.formDataSet.addRecord(obj)
    },
  },
}
</script>

<style scoped lang="less">
/deep/.ant-modal-body {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  padding: 0 24px 24px 24px;
}
</style>